
<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="学生姓名">
        <el-input v-model="formInline.studentname" placeholder="学生姓名" clearable />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="warning" @click="onAdd">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="编号" width="180"/>
      <el-table-column prop="studentname" label="姓名" width="180"/>
      <el-table-column prop="gender" label="性别" width="180"/>
      <el-table-column prop="age" label="年龄" width="180"/>
      <el-table-column prop="address" label="地址"/>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button type="primary" size="small" @click="onEdit(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="onDel(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background
                   layout="total, prev, pager, next, jumper"
                   :total="total"
                   :page-count="pages"
                   :current-page="pageNum"
                   @current-change="changePage"
    />

<!--    添加、修改-->
    <el-dialog
        v-model="dialogVisible"
        :destroy-on-close="true"
        title="学生信息"
        width="30%"
    >
      <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          status-icon
      >
        <el-form-item label="学生姓名" prop="studentname">
          <el-input v-model="ruleForm.studentname" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="ruleForm.gender">
            <el-radio label="男" />
            <el-radio label="女" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="ruleForm.age" />
        </el-form-item>
        <el-form-item label="班级" prop="classno">
          <el-select v-model="ruleForm.classno" placeholder="班级">
            <el-option label="计算机软件1班" value="1" />
            <el-option label="计算机软件2班" value="2" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button @click="resetForm('ruleFormRef')">重置</el-button>
          <el-button type="primary" @click="submitForm">
            提交
          </el-button>

        </el-form-item>
      </el-form>

    </el-dialog>

  </div>
</template>
<!--
-->
<script>
import {reactive, toRefs, onMounted, ref,getCurrentInstance} from 'vue'
import axios from "axios";
import { ElMessage,ElMessageBox } from "element-plus"

export default{
  name: "StuView",

  setup(){
    const {proxy}=getCurrentInstance()

    const data = reactive({
      formInline:{
        studentname:''
      },
      ruleForm:{
        studentname: '',
        gender:'',
        age:'',
        classno:''
      },
      rules:{
        studentname: [
          { required: true, message: '请输入学生姓名', trigger: 'blur' },
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'blur' },
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { pattern :/^(1[8-9]|[2-9]\d)$/,message: '必须是18-99之间的数字', trigger: 'blur' }
        ],
        classno: [
          { required: true, message: '请选择班级', trigger: 'blur' },
        ]
      },
      dialogVisible:false,
      pageNum:1,
      tableData:[],
      total:0,
      pages:0,
    })

    //编辑
    const onEdit = (row) => {
      data.ruleForm=row
      data.dialogVisible=true
    }
    //添加
    const onAdd = () => {
      data.ruleForm={}
      data.dialogVisible=true
    }

    const onDel = (id) => {
      ElMessageBox.confirm(
          '你确定要删除该记录吗?',
          '警告',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(()=>{
        axios({
              url:'/api/student/'+id,
              method:'delete',
              }).then(function (res){
                if(res.data.code==200){
                  ElMessage({
                    type:'success',
                    message:'已删除',
                  })
                  data.pageNum=1
                  getBackData()
                }else {
                  ElMessage({
                    type:'error',
                    message:'删除失败',
                  })
                }
            })
      }).catch(()=>{
        ElMessage({
          type:'info',
          message:'已取消',
        })
      })
    }
    const ruleForRef = ref();
    const submitForm = () => {
      proxy.$refs['ruleFormRef'].validate((valid) => {
        if (valid) {
          axios({
            url:'/api/student',
            method: 'post',
            data:data.ruleForm
          }).then(function (res){
            if(res.data.code==200){
              ElMessage.success("操作成功")
              data.pageNum=1
              data.dialogVisible=false
              getBackData()
            }else{
              ElMessage.error("出现异常")
            }
          })
        } else {
          ElMessage.error("请按提示填写表单")
          return false;
        }
      });
      // ruleForRef.value.validate(vaild => {
      //   console.log(ruleForRef.value)
      //   if (vaild) {
      //     axios({
      //       url: '/api/student',
      //       method:"POST",
      //       data:data.ruleForm
      //     }).then(function (res) {
      //       if(res.data.code ==200){
      //         ElMessage.success("操作成功")
      //         data.dialogVisible=false
      //         getBackData()
      //       }else{
      //         ElMessage.error("系统异常")
      //       }
      //     })
      //
      //   } else {
      //     console.log("数据校验失败")
      //     ElMessage.error("请按提示填写表单")
      //   }
      // })
    }

    //重置
    const resetForm = () => {
      proxy.$refs['ruleForm'].resetFields;
      // ruleForRef.value.resetFields();
    }
    //查询
    const onSubmit = () => {
      data.pageNum=1;
      getBackData()
    }

    onMounted(function (){
      getBackData()
    })

    //分页
    const changePage = (pageNum) => {
      data.pageNum=pageNum;
      getBackData();
    }
    const getBackData = ()=>{
      axios({
        url:'/api/student/pageStudent?studentname='+data.formInline.studentname+'&pageNum='+data.pageNum,
        method:'get'
      }).then(function (res){
        console.log(res)
        data.tableData=res.data.data.list
        data.pageNum=res.data.data.pageNum
        data.total=res.data.data.total
        data.pages=res.data.data.pages
      })
    }
    return {
      ...toRefs(data),
      getBackData,
      onSubmit,
      changePage,
      onEdit,
      onAdd,
      onDel,
      ruleForRef,
      submitForm,
      resetForm
    }
  }
}
</script>

<style scoped lang="scss">

</style>